<template>
	<view class="tui-center">
		<uni-nav-bar fixed left-icon="back" title="意见反馈" @clickLeft="clickLeft()"></uni-nav-bar>
		<view class="feedback-title">
			<text>分类标签</text>
		</view>
		<view class="feedback-body tui-flex">
			<uni-tag :type="showType1? 'primary' : 'default'" text="功能建议" inverted class="tui-taged" @click="bindClick(1)"></uni-tag>
			<uni-tag :type="showType2? 'primary' : 'default'" text="体验建议" inverted class="tui-taged" @click="bindClick(2)"></uni-tag>
			<uni-tag :type="showType3? 'primary' : 'default'" text="内容建议" inverted class="tui-taged" @click="bindClick(3)"></uni-tag>
			<uni-tag :type="showType4? 'primary' : 'default'" text="bug反馈" inverted class="tui-taged" @click="bindClick(4)"></uni-tag>
		</view>
		<view class="feedback-title">
			<text>问题和意见</text>
			<view @tap="chooseMsg">
				<text>快速键入</text>
				<uni-icons type="arrowdown" color="#bbb" size="36" style="padding-left: 10rpx;"></uni-icons>
			</view>
		</view>
		<view class="feedback-body">
			<textarea placeholder="请详细描述你的问题和意见..."
				v-model="sendDate.content"
				style="width: 100%;height: 220rpx;font-size: 32rpx"
			></textarea>
		</view>
		<view class="feedback-body feedback-uploader">
			<view class="uni-uploader">
				<view class="uni-uploader-body">
					<block v-for="(image, index) in imageList" :key="index">
						<view class="uni-uploader__file">
							<image class="uni-uploader__img" :src="image" @tap="previewImage(index)"></image>
							<view class="close-view">
								<uni-icons type="clear" color="#ff5053" size="40" @click="close(index)"
									style="background: #fff;border-radius: 50%;"/>
							</view>
						</view>
					</block>
					<view class="uni-uploader__input-box" v-show="imageList.length < 5">
						<view class="uni-uploader__input" @tap="chooseImg"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="feedback-title"><text>联系方式（手机号/邮箱）</text></view>
		<view class="feedback-body" style="padding-bottom: 140rpx">
			<input class="feedback-input" v-model="sendDate.contact" placeholder="(选填,方便我们联系你 )" />
		</view>

		<pay-btn btnShow btnText="提交" @separateTo="send"></pay-btn>

		<!-- 登录提示 -->
		<uni-login-model></uni-login-model>
	</view>
</template>

<script>
	import  uniTag from '@/components/uni-tag/uni-tag.vue'
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
    import payBtn from '@/components/payBtn/index.vue'
    import uniLoginModel from '@/components/uni-login-model/uni-login-model.vue'
	
	export default {
		name: 'opinion',
		components: {
			uniTag, uniIcons, payBtn, uniLoginModel
		},
		data() {
			return {
				showType1: true,
				showType2: false,
				showType3: false,
				showType4: false,
				msgContents: ['退款显示订单', '提交表单提示加载中'],
				sendDate: {
                    type: null,
					content: '',
					contact: '',
                    pics: ''
				},
				imageList: [],
				list: []
			}
		},
		onLoad() {
			this.bindClick(1)
		},
		methods: {
			/*** 切换标签 */
			bindClick(falg) {
				let actions = {
					'1': [true, false, false, false, ['退款显示订单', '提交表单提示加载中']],
					'2': [false, true, false, false, ['启动缓慢', '偶发性崩溃']],
					'3': [false, false, true, false, ['界面显示错乱', '偶发性崩溃']],
					'4': [false, false, false, true, ['界面显示错乱', '启动缓慢']]
				}
				let action = actions[falg]
				this.showType1 = action[0]
				this.showType2 = action[1]
				this.showType3 = action[2]
				this.showType4 = action[3]
				this.msgContents = action[4]
				this.sendDate.type = falg
			},
			/*** 快速输入 */
			chooseMsg() {
				uni.showActionSheet({
					itemList: this.msgContents,
					success: res => {
						this.sendDate.content = this.msgContents[res.tapIndex];
					}
				});
			},
			/*** 选择图片*/
			chooseImg() {
                var that = this;
				uni.chooseImage({
					sourceType: ['camera', 'album'],
					sizeType: 'compressed',
					count: 5 - that.imageList.length,
					success: res => {
                        that.imageList = this.imageList.concat(res.tempFilePaths);
                        var tempFilePaths = res.tempFilePaths;
                        for (var i = 0; i < tempFilePaths.length; i++) {
                            uni.uploadFile({
                                url: 'upload/image',
                                filePath: res.tempFilePaths[i],
                                name: 'file',
                                methods: 'POST',
                                header: {
                                    ContentType: "multipart/form-data",
                                    Authorization: 'Bearer ' + uni.getStorageSync('token'),
                                }
                            }).then(res => {
                                let data = JSON.parse(res[1].data)
                                let imageUrl = []
                                this.list.push({url: data.data.url})
                                for (let item of this.list) {
                                    imageUrl.push(item.url)
                                    this.sendDate.pics = imageUrl.join(',')
                                }
                                console.log(this.sendDate.pics)
                            }).catch(error => {
                            })
                        }
					}
				})
			},
			/*** 预览图片* @param {Object} index*/
			previewImage(index) {
				uni.previewImage({
					urls: this.imageList,
					current: this.imageList[index]
				});
			},
			/*** 删除图片* @param {Object} e*/
			close(e) {
				this.imageList.splice(e, 1);
			},
			/*** 提交*/
			send() {
				if (this.sendDate.content.length === 0) {
					uni.showModal({
						content: '请输入问题和意见',
						showCancel: false
					});
					return;
				}
				this.$api.api('feedback', this.sendDate).then(res => {
                    if (res.code == 200) {
                        this.$api.msg('提交成功')
                        this.sendDate = {
                            type: 1,
                            content: '',
                            contact: ''
                        }
                    } else {
                        this.$api.msg(res.message)
                    }
				}).catch(error => {
					this.$api.msg(error.message)
				})
				let imgs = this.imageList.map((value, index) => {
					return {
						name: 'images' + index,
						uri: value
					};
				});
				this.imageList = []
			},
            clickLeft() {
                uni.navigateBack({delta: 1})
            }
		}
	}
</script>

<style lang="scss">
	.feedback-title {
		display: flex;
		align-items: center;
		flex-direction: row;
		justify-content: space-between;
		padding: $uni-spacing-row-base;
		font-size: $uni-font-size-base;
		color: $uni-text-color-placeholder;
	}
	.feedback-body {
		background-color: $uni-bg-color;
		padding: $uni-spacing-row-lg;
		.tui-taged {
			display: inline-block;
			margin: 20rpx 50rpx 0 0;
		}
		.tui-taged:nth-child(-n+3) {
			margin-top: 0;
		}
		.feedback-input {
			font-size: 30rpx;
		}
	}
	.feedback-uploader {
		padding: $uni-spacing-row-base;
		.uni-uploader {
			flex: 1;
			flex-direction: column;
			.uni-uploader-body {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				.uni-uploader__file {
					position: relative;
					margin: $uni-spacing-row-sm;
					width: 210rpx;
					height: 210rpx;
					.uni-uploader__img {
						display: block;
						width: 210rpx;
						height: 210rpx;
					}
					.close-view {
						position: absolute;
						top: -36rpx;
						right: -8rpx;
					}
				}
				.uni-uploader__input-box {
					position: relative;
					margin:10rpx;
					width: 208rpx;
					height: 208rpx;
					border: 2rpx solid #D9D9D9;
					&::after, &::before {
						content: " ";
						position: absolute;
						top: 50%;
						left: 50%;
						-webkit-transform: translate(-50%, -50%);
						transform: translate(-50%, -50%);
						background-color: #D9D9D9;
					}
					&::after { width: 79rpx; height: 4rpx; }
					&::before { width: 4rpx; height: 79rpx; }
					&:active {
						border-color: $uni-text-color-grey;
						&::before, &::after {
							background-color: $uni-text-color-grey;
						}
					}
					.uni-uploader__input {
						position: absolute;
						z-index: 1;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						opacity: 0;
					}
				}
			}
		}
	}
</style>
